<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #bs{
            width: 1000px;
            height: 5px;
            box-shadow: 0 2px 5px #000;
            margin: 50px auto;
        }
        #box{
            width: 1000px;
            margin: 0 auto;
        }
        #box ul{
            overflow: hidden;
        }
        #box ul li{
            width: 214px;
            height: 300px;
            float: left;
            margin: 0 18px;
            background-image: url("images/bg_icon.png");
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }
        #box ul li:nth-child(1){background-color: #00A0EA}
        #box ul li:nth-child(2){background-color: #97C412}
        #box ul li:nth-child(3){background-color: #ED9644}
        #box ul li:nth-child(4){background-color: #5CC8B0}

        #box ul li div{
            transition: 1s;
        }

        #box ul li .icon{
            width: 80px;
            height: 80px;
            margin: 40px auto;
        }
        #box ul li .info{
            transition-delay: .5s;
        }
        #box ul li .info,#box ul li .more{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 140px;
            background: rgba(0,0,0,0.5);
        }
        #box ul li .more{
            left:214px;

        }

        #box ul li:hover .icon{ transform: rotate(360deg) }
        #box ul li:hover .info{
            bottom: -140px;
        }
        #box ul li:hover .more{
            left: 0;
            transition-delay: 1s;
        }
    </style>
</head>
<body>
    <div id="bs"></div>
    <div id="box">
        <ul>
            <li>
                <div class="icon"><img src="images/html.png" width="100%" height="100%"></div>
                <div class="info"></div>
                <div class="more"></div>
            </li>
            <li>
                <div class="icon"><img src="images/html5.png" width="100%" height="100%"></div>
                <div class="info"></div>
                <div class="more"></div>
            </li>
            <li>
                <div class="icon"><img src="images/js.png" width="100%" height="100%"></div>
                <div class="info"></div>
                <div class="more"></div>
            </li>
            <li>
                <div class="icon"><img src="images/dome.png" width="100%" height="100%"></div>
                <div class="info"></div>
                <div class="more"></div>
            </li>
        </ul>
    </div>
</body>
</html>